

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>HTML笔记 - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="HTML笔记">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-09-01 18:41" pubdate>
        2021年9月1日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      2.3k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      36
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">HTML笔记</h1>
            
            <div class="markdown-body">
              <pre><code class=" mermaid">graph LR

A[方形] --&gt;B(圆角)

    B --&gt; C&#123;条件a&#125;

    C --&gt;|a=1| D[结果1]

    C --&gt;|a=2| E[结果2]

    F[横向流程图]
</code></pre>

<h1 id="前端工程师"><a href="#前端工程师" class="headerlink" title="前端工程师"></a>前端工程师</h1><pre><code class=" mermaid">graph LR
A[项目立项]--&gt;B[需求分析]--&gt;C[项目经理]--&gt;D[UI设计师]--&gt;|确认|E[甲方爸爸]
E--&gt;|原型确定|D
D--&gt;F[前端工程师]--&gt;G[后端工程师]--&gt;H[测试人员]
</code></pre>



<h1 id="前端基础"><a href="#前端基础" class="headerlink" title="前端基础"></a>前端基础</h1><h2 id="7-3"><a href="#7-3" class="headerlink" title="7.3"></a>7.3</h2><h3 id="折叠文本标签-details的使用"><a href="#折叠文本标签-details的使用" class="headerlink" title="折叠文本标签 details的使用"></a>折叠文本标签 details的使用</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">details</span>&gt;</span><br>    <span class="hljs-comment">&lt;!-- summary标签改变折叠后显示的文本 --&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">summary</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">font</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;7&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>第一项<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">font</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">summary</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;disc&quot;</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第一小项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第二小项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第三小项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">details</span>&gt;</span><br></code></pre></td></tr></table></figure>
<h3 id="常用文本修饰标签"><a href="#常用文本修饰标签" class="headerlink" title="常用文本修饰标签"></a>常用文本修饰标签</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>加粗标签<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>加粗一<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>加粗二<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>倾斜标签<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span>倾斜一<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>倾斜二<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">cite</span>&gt;</span>倾斜三<span class="hljs-tag">&lt;/<span class="hljs-name">cite</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>下划线标签<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">u</span>&gt;</span>下划线一<span class="hljs-tag">&lt;/<span class="hljs-name">u</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">ins</span>&gt;</span>下划线二<span class="hljs-tag">&lt;/<span class="hljs-name">ins</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>删除线<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">del</span>&gt;</span>删除线一<span class="hljs-tag">&lt;/<span class="hljs-name">del</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">strike</span>&gt;</span>删除线二<span class="hljs-tag">&lt;/<span class="hljs-name">strike</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--常用 b i u strike--&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">sup</span>&gt;</span>上标<span class="hljs-tag">&lt;/<span class="hljs-name">sup</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">sub</span>&gt;</span>下标<span class="hljs-tag">&lt;/<span class="hljs-name">sub</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">big</span>&gt;</span>字体加大一号<span class="hljs-tag">&lt;/<span class="hljs-name">big</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">small</span>&gt;</span>字体减小一号<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="特殊符号"><a href="#特殊符号" class="headerlink" title="特殊符号"></a>特殊符号</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>特殊字符<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>	<span class="hljs-symbol">&amp;copy;</span>版权所有<br>	<span class="hljs-symbol">&amp;reg;</span>注册商标<br>	<span class="hljs-symbol">&amp;deg;</span>度数<br>	<span class="hljs-symbol">&amp;lt;</span>小于号<br>	<span class="hljs-symbol">&amp;gt;</span>大于号<br></code></pre></td></tr></table></figure>

<h3 id="图片标签"><a href="#图片标签" class="headerlink" title="图片标签"></a>图片标签</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./img/碧梨7.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;图片加载失败!&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;碧梨&quot;</span> <span class="hljs-attr">vspace</span>=<span class="hljs-string">&quot;100&quot;</span> <span class="hljs-attr">hspace</span>=<span class="hljs-string">&quot;50&quot;</span>&gt;</span><br><span class="hljs-comment">&lt;!-- vspace 上边距 hspace左边距 --&gt;</span><br></code></pre></td></tr></table></figure>



<h2 id="7-4"><a href="#7-4" class="headerlink" title="7.4"></a>7.4</h2><h3 id="不使用js使目标元素变色"><a href="#不使用js使目标元素变色" class="headerlink" title="不使用js使目标元素变色"></a>不使用js使目标元素变色</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css">&lt;style type=&quot;text/css&quot;&gt;<br>			<span class="hljs-comment">/* 不使用js实现元素目标变色 */</span><br>			<span class="hljs-selector-id">#aaa</span><span class="hljs-selector-pseudo">:target</span>&#123;<br>				<span class="hljs-attribute">color</span>: red;<br>			&#125;<br>			<span class="hljs-selector-id">#bbb</span><span class="hljs-selector-pseudo">:target</span>&#123;<br>				<span class="hljs-attribute">color</span>: blue;<br>			&#125;<br>&lt;/style&gt;<br></code></pre></td></tr></table></figure>

<h3 id="a标签中target属性几种值的作用"><a href="#a标签中target属性几种值的作用" class="headerlink" title="a标签中target属性几种值的作用"></a>a标签中target属性几种值的作用</h3><ol>
<li>_self：默认值，在当前页面中打开链接。</li>
<li>_blank：在新页面中打开链接。</li>
<li>frameName：在某一个iframe中打开。（_search）</li>
<li>_top：在顶层窗体中打开。</li>
<li>_parent：在父级窗体中打开。</li>
</ol>
<h3 id="注意：链接标签"><a href="#注意：链接标签" class="headerlink" title="注意：链接标签"></a>注意：链接标签</h3><blockquote>
<p><strong>链接标签不是文字标签 可以放其他东西。</strong></p>
</blockquote>
<h3 id="重要：map标签的使用"><a href="#重要：map标签的使用" class="headerlink" title="重要：map标签的使用"></a>重要：map标签的使用</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- map标签的使用 实现一个图片点击不同区域跳转不同的链接 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">img</span>  <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./img/碧梨12.jpg&quot;</span> <span class="hljs-attr">usemap</span>=<span class="hljs-string">&quot;#map1&quot;</span>&gt;</span><br><br><span class="hljs-comment">&lt;!-- usemap 可能使用id 可能使用name 所有id和name尽量相同--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">map</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;map1&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;map1&quot;</span>&gt;</span><br>	<span class="hljs-comment">&lt;!-- area划分区域 coords坐标  rect矩形 circle圆形--&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">area</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;rect&quot;</span> <span class="hljs-attr">coords</span>=<span class="hljs-string">&quot;0,0,300,300&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#aaaa&quot;</span>/&gt;</span><br>	<span class="hljs-comment">&lt;!-- 圆形三个坐标 圆心和半径 --&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">area</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;circle&quot;</span> <span class="hljs-attr">coords</span>=<span class="hljs-string">&quot;200,500,100&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#bbbb&quot;</span>/&gt;</span><br>	<span class="hljs-comment">&lt;!-- 多边形 polygon 三角形--&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">area</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;poly&quot;</span> <span class="hljs-attr">coords</span>=<span class="hljs-string">&quot;350,0,200,300,300,500&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#cccc&quot;</span>/&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">map</span>&gt;</span><br><br><br><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;aaaa&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin-top: 500px;&quot;</span>&gt;</span>矩形跳转到这a<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;bbbb&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin-top: 1000px;&quot;</span>&gt;</span>圆形跳转到这b<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;cccc&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin-top: 1500px;&quot;</span>&gt;</span>多边形跳转到这b<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="换行标签"><a href="#换行标签" class="headerlink" title="换行标签"></a>换行标签</h3><blockquote>
<p>换行标签 br 全称为 break read 中断读取。如果在HTML代码中直接使用回车，则只有一个空格位。</p>
</blockquote>
<h3 id="属性面板集–fieldset"><a href="#属性面板集–fieldset" class="headerlink" title="属性面板集–fieldset"></a>属性面板集–fieldset</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 属性面板 --&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;field1&quot;</span>&gt;</span><br>		<span class="hljs-comment">&lt;!-- 面板标题 --&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">legend</span>&gt;</span>唐诗<span class="hljs-tag">&lt;/<span class="hljs-name">legend</span>&gt;</span><br>            <span class="hljs-comment">&lt;!-- 面板内容 --&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>哈哈哈哈<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>哈哈哈哈<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>哈哈哈哈<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>哈哈哈哈<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="文字滚动效果–marquee"><a href="#文字滚动效果–marquee" class="headerlink" title="文字滚动效果–marquee"></a>文字滚动效果–marquee</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- marquee 废弃 后期有css动画代替 --&gt;</span><br><span class="hljs-comment">&lt;!-- behavior  scroll无限滚动 slide滚一次停止 alternate 交替 scrollamount一次滚动距离 scrolldelay一次滚动的时间--&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">marquee</span> <span class="hljs-attr">bgcolor</span>=<span class="hljs-string">&quot;black&quot;</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;left&quot;</span> <span class="hljs-attr">behavior</span>=<span class="hljs-string">&quot;alternate&quot;</span> <span class="hljs-attr">scrollamount</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">scrolldelay</span>=<span class="hljs-string">&quot;500&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">font</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;red&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;7&quot;</span>&gt;</span>热烈庆祝中国共产党成立100周年<span class="hljs-tag">&lt;/<span class="hljs-name">font</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">marquee</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="表格–table"><a href="#表格–table" class="headerlink" title="表格–table"></a>表格–table</h3><blockquote>
<p><strong>注意：table下默认会有tbody就算不写最后浏览器也默认会给我们添加</strong></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- border 控制是否有表格边框 默认没有 --&gt;</span><br><span class="hljs-comment">&lt;!-- cellspacing设置单元格的间距 --&gt;</span><br><span class="hljs-comment">&lt;!-- cellpadding设置单元格的内边距 --&gt;</span><br><span class="hljs-comment">&lt;!-- align=&quot;center&quot; 整个表格居中 --&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">align</span>=<span class="hljs-string">&quot;center&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">cellspacing</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">cellpadding</span>=<span class="hljs-string">&quot;10&quot;</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">caption</span>&gt;</span>表格标题<span class="hljs-tag">&lt;/<span class="hljs-name">caption</span>&gt;</span><br>				<br>				<span class="hljs-comment">&lt;!-- 所有列的配置 --&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">colgroup</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><br>					<span class="hljs-comment">&lt;!-- 将第二列设置为红色 --&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">col</span> <span class="hljs-attr">bgColor</span>=<span class="hljs-string">&quot;red&quot;</span>&gt;</span> <br>					<span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">colgroup</span>&gt;</span><br>				<br>				<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>姓名<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>性别<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>爱好<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;200px&quot;</span>&gt;</span><br>					<span class="hljs-comment">&lt;!-- valign垂直对齐 --&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">valign</span>=<span class="hljs-string">&quot;top&quot;</span>&gt;</span>范绪超<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">valign</span>=<span class="hljs-string">&quot;bottom&quot;</span>&gt;</span>男<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>吃饭、睡觉<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>		<br>				<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>范绪超啊<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>男<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>吃饭、睡觉、玩游戏<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>表格合并案例</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- table 案例 --&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">align</span>=<span class="hljs-string">&quot;center&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;text-align: center; margin-top: 200px;&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">cellspacing</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">cellpadding</span>=<span class="hljs-string">&quot;5&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;200px&quot;</span></span><br><span class="hljs-tag">		 <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;200px&quot;</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">colgroup</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">col</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;100px&quot;</span>/&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">col</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;100px&quot;</span> /&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">col</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;100px&quot;</span> /&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">colgroup</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">align</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">valign</span>=<span class="hljs-string">&quot;top&quot;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">rowspan</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>5<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">valign</span>=<span class="hljs-string">&quot;bottom&quot;</span>&gt;</span>4<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<br>			<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>		<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span><br></code></pre></td></tr></table></figure>
<hr>
<h3 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h3><pre><code class=" mermaid">graph TD
A[表单类型]
A--&gt;B[输入]
A--&gt;C[选择]
A--&gt;D[交互]
</code></pre>

<blockquote>
<p>readonly=”readonly” 单属性 属性和属性名一样</p>
</blockquote>
<h4 id="1-文本输入框"><a href="#1-文本输入框" class="headerlink" title="1.文本输入框"></a>1.文本输入框</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>通用属性</p>
<ol>
<li>placeholder</li>
<li>value</li>
<li>maxlength</li>
<li>readonly</li>
<li>disable</li>
</ol>
</blockquote>
<h4 id="2-数字输入框"><a href="#2-数字输入框" class="headerlink" title="2.数字输入框"></a>2.数字输入框</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;number&quot;</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<ol>
<li>min：最小值</li>
<li>max：最大值</li>
<li>step：步长</li>
</ol>
</blockquote>
<h4 id="3-label标签与radio结合使用，绑定"><a href="#3-label标签与radio结合使用，绑定" class="headerlink" title="3.label标签与radio结合使用，绑定"></a>3.label标签与radio结合使用，绑定</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- label与input结合使用 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">hr</span> &gt;</span><br><span class="hljs-comment">&lt;!-- 第一种 --&gt;</span><br><span class="hljs-comment">&lt;!-- 绑定字和input标签 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span><br>	男<br>	<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;b&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span><br>	女<br>	<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;b&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">hr</span> &gt;</span><br><span class="hljs-comment">&lt;!-- 第二种 label和input拆开 这个用的多--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;male&quot;</span>&gt;</span>男<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;c&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;male&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;female&quot;</span>&gt;</span>女<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;c&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;female&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="4-下拉列表"><a href="#4-下拉列表" class="headerlink" title="4.下拉列表"></a>4.下拉列表</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 下拉列表 --&gt;</span><br><span class="hljs-comment">&lt;!-- size控制当前显示的长度 multiple设置可以多选 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">multiple</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;10&quot;</span>&gt;</span><br>	<span class="hljs-comment">&lt;!-- optgroup设置分组 --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">optgroup</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;华南&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>湖北省<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">selected</span>&gt;</span>湖南省<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>广西省<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">selected</span>&gt;</span>广东省<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">optgroup</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">optgroup</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;华北&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>河北省<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>河南省<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>山东省<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>安徽省<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">optgroup</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">optgroup</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;东北&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>黑龙江省<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>吉林省<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>辽宁省<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">optgroup</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="5-日期组件"><a href="#5-日期组件" class="headerlink" title="5.日期组件"></a>5.日期组件</h4><blockquote>
<p><strong>小坑！！！：时间和日期都要不是datetime而是datetime-local</strong></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>日期组件<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br><span class="hljs-comment">&lt;!-- 年月日 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;date&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span><br><span class="hljs-comment">&lt;!-- 时间 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;time&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><span class="hljs-comment">&lt;!-- 坑！！! --&gt;</span><br><span class="hljs-comment">&lt;!-- 日期时间 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>小坑<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br><span class="hljs-comment">&lt;!-- datetime什么东西都没有 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;datetime&quot;</span>&gt;</span>  <span class="hljs-comment">&lt;!--这个不行--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;datetime-local&quot;</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="6-文本域"><a href="#6-文本域" class="headerlink" title="6.文本域"></a>6.文本域</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">&quot;5&quot;</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">&quot;10&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入内容&quot;</span> <span class="hljs-attr">maxlength</span>=<span class="hljs-string">&quot;50&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="7-按钮"><a href="#7-按钮" class="headerlink" title="7.按钮"></a>7.按钮</h4><blockquote>
<p><strong>注意：重置按钮不是清空表单 而是恢复默认值</strong></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 重置按钮不是清空表单 而是恢复默认值 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;reset&quot;</span> /&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="8-文件控件"><a href="#8-文件控件" class="headerlink" title="8.文件控件"></a>8.文件控件</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- multiple 开启选择多个 accept 允许上传格式 --&gt;</span><br>文件上传：<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;file&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">multiple</span>=<span class="hljs-string">&quot;multiple&quot;</span> <span class="hljs-attr">accept</span>=<span class="hljs-string">&quot;image/*&quot;</span> &gt;</span><br>   <span class="hljs-comment">&lt;!-- accept更多格式可以搜索MIME文件原始格式 --&gt;</span><br></code></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>类型</th>
<th>描述</th>
<th>典型示例</th>
</tr>
</thead>
<tbody><tr>
<td><code>text</code></td>
<td>表明文件是普通文本，理论上是人类可读</td>
<td><code>text/plain</code>, <code>text/html</code>, <code>text/css, text/javascript</code></td>
</tr>
<tr>
<td><code>image</code></td>
<td>表明是某种图像。不包括视频，但是动态图（比如动态gif）也使用image类型</td>
<td><code>image/gif</code>, <code>image/png</code>, <code>image/jpeg</code>, <code>image/bmp</code>, <code>image/webp</code>, <code>image/x-icon</code>, <code>image/vnd.microsoft.icon</code></td>
</tr>
<tr>
<td><code>audio</code></td>
<td>表明是某种音频文件</td>
<td><code>audio/midi</code>, <code>audio/mpeg, audio/webm, audio/ogg, audio/wav</code></td>
</tr>
<tr>
<td><code>video</code></td>
<td>表明是某种视频文件</td>
<td><code>video/webm</code>, <code>video/ogg</code></td>
</tr>
<tr>
<td><code>application</code></td>
<td>表明是某种二进制数据</td>
<td><code>application/octet-stream</code>, <code>application/pkcs12</code>, <code>application/vnd.mspowerpoint</code>, <code>application/xhtml+xml</code>, <code>application/xml</code>,  <code>application/pdf</code></td>
</tr>
</tbody></table>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/HTML/">HTML</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2021/09/04/CSS%E7%AC%94%E8%AE%B0-1/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">CSS笔记-1</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/01/22/hello-world/">
                        <span class="hidden-mobile">开始</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
